<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css')}}" />
        <link rel="stylesheet" href="{{ url_for('static',filename='css/user.css')}}" />
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
		<script src="{{ url_for('static',filename='js/jquery.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/popper.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/bootstrap.min.js')}}"></script>

		<script type="text/javascript">
			$(document).ready(function(){
				$.ajax({
					type: "post",
					url: '/user_m',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',//编码格式
					success: function (response) {
						var data = response.data;

						for(var i=0;i<data.length;i++){
						  	var tr=document.createElement('tr');
						  	tr.setAttribute("id", data[i].username);
						  	var tdname=document.createElement('td')
						  	var tdpassword=document.createElement('td')
						  	var tdcz=document.createElement('td')
						  	var tdcz_btn_x=document.createElement('button')
						  	var tdcz_btn_s=document.createElement('button')
						  	tdname.innerHTML=data[i].username;
						  	tdpassword.innerHTML=data[i].password;
						  	tdcz_btn_x.setAttribute("type", "button");
						  	tdcz_btn_x.setAttribute("id", data[i].username+'_x');
						  	tdcz_btn_x.setAttribute("onclick", "xg(this.id)");
						  	tdcz_btn_x.setAttribute("data-toggle", "modal");
						  	tdcz_btn_x.setAttribute("data-target", "#myModal");
						  	tdcz_btn_x.innerHTML='修改'
						  	tdcz_btn_s.setAttribute("type", "button");
						  	tdcz_btn_s.setAttribute("id", data[i].username+'_s');
						  	tdcz_btn_s.setAttribute("onclick", "sc(this.id)");
						  	//tdcz_btn_s.setAttribute("data-toggle", "modal");
						  	//tdcz_btn_s.setAttribute("data-target", "#myModal_s");
						  	tdcz_btn_s.innerHTML='删除'

							tdcz.appendChild(tdcz_btn_x);
							tdcz.appendChild(tdcz_btn_s);

						  	tr.appendChild(tdname);
						  	tr.appendChild(tdpassword);
						  	tr.appendChild(tdcz);
						  	var tbody=document.getElementById('biaoge');
						  	tbody.appendChild(tr);
						}
					},
					error: function(xhr, type) {
						console.log(xhr);
					}
				});
			})

			function update_pw(){

                var un_text = $('#w_user').text(); //获取修改密码的 用户名
                var y_pw_text = document.getElementById('y_pw').value; //获取原密码
                var x_pw_text = document.getElementById('x_pw').value; //获取新密码
                var data = {
                    'un_text': un_text,
                    'y_pw_text': y_pw_text,
                    'x_pw_text': x_pw_text
                };

                $.ajax({
							type: "post",
							url: '/user_xg',
							dataType: 'json',
							data: JSON.stringify(data),
							contentType: 'application/json;charset=UTF-8',//编码格式
							success: function (response) {
							    if(response.data == 'success')  // response.data != 'undefined' &&
							    {
								    alert('修改成功！');
								    window.location.href = "{{ url_for('user_m')}}";
								}
								else
								{
								    alert('密码错误，修改失败！');
								}
							},
							error: function(xhr, type) {
								console.log(xhr);
    						}
				});

			}

			function xg(id){
				id=id.replace("_x",'');
				var t= document.getElementById('w_user');
				var t= document.getElementById('w_user');
				t.innerHTML = id;

			}

			function sc(id){
                id=id.replace("_s",'');
                console.log(id+':删除');
                var flag = confirm('确认删除？');

                if(flag == true){
                    var data = {
                        'username': [id]
                    }
                    $.ajax({
                        type: "post",
                        url: '/user_sc',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        contentType: 'application/json;charset=UTF-8',//编码格式
                        success: function (response) {
                            if(response.data == 'success')  // response.data != 'undefined' &&
                            {
                                var tbody=document.getElementById('biaoge');
                                var tr=document.getElementById(id);
                                tbody.removeChild(tr);
                            }
                            else
                            {
                                alert('删除失败！');
                            }
                        },
                        error: function(xhr, type) {
                            console.log(xhr);
                        }
                    });
                }
			}

			function load(){

				$.ajax({
							type: "post",
							url: '/user_m',
							dataType: 'json',
							contentType: 'application/json;charset=UTF-8',//编码格式
							success: function (response) {
								var data = response.data;

								for(var i=0;i<data.length;i++){
								  var tr=document.createElement('tr');
								  var tdname=document.createElement('td')
								  var tdpassword=document.createElement('td')
								  tdname.innerHTML=data[i].username;
								  tdpassword.innerHTML=data[i].password;

								  tr.appendChild(tdname);
								  tr.appendChild(tdpassword);
								  var tbody=document.getElementById('biaoge');
								  tbody.appendChild(tr);
								}
							},
							error: function(xhr, type) {
								console.log(xhr);
    						}
				});
			}
		</script>
	</head>
	<body>
	<div class="banner">
			<span>爬&nbsp;&nbsp;&nbsp;&nbsp;虫&nbsp;&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;&nbsp;管&nbsp;&nbsp;&nbsp;&nbsp;理</span>
	</div>
	<div class="midbody">
		<div class="card" style="overflow:auto; height:1000px">
		<table class="table table-hover">
    <thead>
      <tr>
		<th>用户名</th>
        <th>密码</th>
		<th>操作</th>
      </tr>
    </thead>
    <tbody id="biaoge">

    </tbody>
  </table>
  </div>
	</div>

	<!-- 模态框 修改 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">修改密码</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
          <div style="display:none"><h3  id="w_user"></h3></div>
          <input name="y_password" id="y_pw" type="text" placeholder="输入原密码：">
          <input name="x_password" id="x_pw" type="password" placeholder="输入新密码：">
          <input name="x_password_s" id="x_pw_s" type="password" placeholder="确认新密码：">
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
          <button type="button" class="btn btn-ok" data-dismiss="modal" onclick="update_pw()">确定</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

    	<!-- 模态框 删除 -->
<div class="modal fade" id="myModal_s">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">删除</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        是否确认删除？
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
          <button type="button" class="btn btn-ok" data-dismiss="modal" onclick="update_pw()">确定</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

	</body>
</html>